import React, { useState } from 'react'
import { Text, View } from '@tarojs/components'
import i18n from '@I18N'
import { EventsITF } from '@INTERFACES/Events'
import { AdditionalChoiceITF } from '@INTERFACES/SmartAssistant'
import { ChoiceITF, EvaluationITF } from '@INTERFACES/Survey'
import { PlanManagementITF } from '@INTERFACES/PlanManagement'
import style from './AssistantCard.module.scss'

interface Props {
  title: string,
  cardClass?: string,
  contentClass?: string,
  onClickBtn?: () => void,
  isHasBtn: boolean,
  btnText?: string,
  expandLength?: number,
  data?: (EventsITF | AdditionalChoiceITF | EvaluationITF | ChoiceITF | PlanManagementITF)[]
  renderItem?: (item: EventsITF | AdditionalChoiceITF| EvaluationITF | ChoiceITF | PlanManagementITF, index: number) => void,
}

const AssistantCard: React.FC<Props> = ({
  children, title = '',
  onClickBtn, cardClass,
  isHasBtn, contentClass, expandLength,
  data, renderItem, btnText
}) => {
  const [isExpand, setIsExpand] = useState(false)
  const showLength = isExpand ? data?.length || 0 : (expandLength || data?.length || 0)
  const onClick = (e: { stopPropagation: () => void }) => {
    e.stopPropagation?.()
    if (Array.isArray(data)) {
      setIsExpand(!isExpand)
      return
    }
    onClickBtn?.()
  }

  return (
    <View className={`${style.card} ${cardClass}`}>
      <Text className={style.noteText}>{title}</Text>
      <View className={style.line} />
      <View className={`${style.topicContent} ${contentClass}`}>
        {Array.isArray(data) && renderItem ? (data.slice(0, showLength).map(renderItem)) : children}
      </View>
      {isHasBtn && (
        <View className={style.viewMoreContainer} onClick={onClick}>
          <Text className={style.viewMoreText}>{btnText || (isExpand ? i18n.common.collapse() : i18n.patient.view_more())}</Text>
        </View>
      )}
    </View>
  )
}

export default AssistantCard
